<template>
    <!-- <button v-on:click.stop="implementHandler">点击</button> -->
    <slot></slot>
</template>
<script>
import { ref } from 'vue';

export default {
    name: 'imgPageLoading',
    data() {
        return {

        }
    },
    created() {
        this.handler?.({ example: this });
    },
    setup({ isContrary }, context) {
        // console.log(props, context);
        var examples = ref([]);
        function findExamples(v) {
            if (v) {
                var k = Object.keys(v);
                var sub = null;
                var f = examples.value.find((item, index) => {
                    var key = Object.keys(item);
                    if (item[key] === v[k]) {
                        sub = index;
                        return item;
                    }
                })
                return [sub, f];
            }
        }
        function remove(v) {
            if (v) {
                var q = findExamples(v);
                if (q) {
                    examples.value.splice(q[0], 1);
                    return q[1];
                }
            }
        }
        function getState() { return { examples, findExamples, remove } };
        function pushExample(v) {
            if (typeof (v) === 'object' && v instanceof Object) {
                if (examples.value.indexOf(v) === -1) {
                    var example = { [examples.value.length]: v };
                    examples.value.push(example);
                    return { example, getState };
                }
            }
        }
        function sxType(v) {
            // console.log(Object.toString.call)
            var a = Object.prototype.toString.call(v);
            return a?.slice?.(8, a?.length - 1);
        }
        function implementHandler() {
            var { value } = examples;
            if (value.length) {
                var fd = findLoadingFlagHandler();
                if (fd && fd.length) {
                    for (var w = 0; w < fd.length; w++) {
                        pdDomWz(fd[w]);
                    }
                }
            }
        }
        function pdDomWz(v) {
            if (v && sxType(v) === 'Object') {
                var { $el } = v || {};
                var rect = getDomRect($el);
                if (rect) {
                    try {
                        var parentRect = getDomRect($el.parentNode);
                        if (parentRect) pdWzHandler(rect, parentRect, v);
                    } catch (err) { }
                }
            }
        }
        function pdWzHandler(v, v1, example) {
            if (v && v1 && example) {
                var zst = round(v1.top - v.top);
                var zsx = round(v1.left - v.left);
                if ((((zst >= 0 && zst < v.height) || zst < 0 && Math.abs(zst) < v.height || Math.abs(zst) < v1.height) && zst - v1.top < v.height && v.top < window.innerHeight) && ((zsx >= 0 && zsx < v.width) || zsx < 0 && Math.abs(zsx) < v.width || Math.abs(zsx) < v1.width) && zsx - v1.left < v.width && v.left < window.innerWidth) example.loadingFlag = true; else example.loadingFlag = false;
            }
        }
        function round(v) {
            return Math.round(v);
        }
        function getDomRect(el) {
            var t = sxType(el);
            if (t && (t.startsWith('HTML') || t.endsWith('Element'))) {
                return el.getBoundingClientRect?.();
            }
        }
        function findLoadingFlagHandler() {
            var { value } = examples;
            return value.map(item => {
                var k = Object.keys(item);
                if ((item[k] && !item[k].loadingFlag) || isContrary) return item[k];
            })
        }
        return { examples, pushExample, getState, implementHandler };
    },
    props: {
        handler: {
            type: Function,
            default: (v) => v,
        }, isContrary: { type: Boolean || String, default: false }
    }, unmounted() { this.examples = [] }
}
</script>
<style scoped>
button {
    width: 120px;
    height: 40px;
    position: fixed;
    right: 10px;
    top: 35vh;
    z-index: 2;
}
</style>